import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react'
import { Image, StyleSheet, Text, TextInput, View } from 'react-native'

import icon_error from '../../assets/images/icon_error.png';
import icon_right from '../../assets/images/icon_right.png';
import icon_question from '../../assets/images/icon_question.webp';


/* 
情景  在父组件中想调用子组件的ref方法 比如失焦 聚焦方法

- 方式1  通过 forwardRef 包裹子组件 转发ref  在父组件中接收ref 并直接调用聚焦和失焦的方法

- 方式2 对外暴露api  先在子组件 书写好方法  再通过 useImperativeHandle 对外暴露方法
*/


export interface CustomInputRef {
  customFocus: () => void;
  customBlur: () => void;
}

export default forwardRef<CustomInputRef, any>(function CustomInput(props, ref) {

  const inputRef = useRef<TextInput>(null);

  const [value, setValue] = useState('')

  const changeInp = (e: any) => {
    const { text } = e.nativeEvent
    setValue(text)
  }

  // 聚焦方法
  const customFocus = () => {
    inputRef.current?.focus();
  }

  // 失焦方法
  const customBlur = () => {
    inputRef.current?.blur();
  }

  // 对外暴露
  useImperativeHandle(ref, () => {
    return {
      customFocus,
      customBlur,
    };
  })




  return (
    <View style={styles.view} >
      <View style={[styles.inputLayout]} >
        <TextInput
          ref={inputRef}
          style={[styles.input, value ? value.length === 11 && styles.show : styles.noshow]}
          value={value}
          maxLength={11}
          keyboardType='number-pad'
          onChange={(e) => changeInp(e)}
        />
      </View>

      <View style={styles.tipLayout}>
        {!value ?
          <>
            <Image style={styles.tipImg} source={icon_question} />
            <Text style={styles.tipsTxt}>请输入您的手机号</Text>
          </> : value.length === 11 ?
            <>
              <Image style={styles.tipImgRight} source={icon_right} />
              <Text style={styles.tipsTxtRight}>输入正确，可进行提交</Text>
            </> :
            <>
              <Image style={styles.tipImgError} source={icon_error} />
              <Text style={styles.tipsTxtError}>格式错误，请输入正确手机号</Text>
            </>}
      </View>
    </View>
  )
})
const styles = StyleSheet.create({
  view: {
    width: '100%',

  },
  noshow: {
    borderColor: '#999',

  },

  show: {
    borderColor: '#25aff3',
    color: '#25aff3'
  },
  inputLayout: {
    width: 300,

  },

  input: {
    borderWidth: 1,
    borderRadius: 12,
    // width: '80%',
    paddingHorizontal: 16,
    paddingVertical: 10,
    color: '#999',
    fontSize: 18,

  },

  tipLayout: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: 6,
    paddingHorizontal: 6,

  },
  tipImg: {
    width: 22,
    height: 22,
    resizeMode: 'contain',
    tintColor: '#888',
  },
  tipsTxt: {
    fontSize: 15,
    color: '#666',
    marginLeft: 6,
    fontWeight: 'bold',
  },
  tipImgRight: {
    width: 18,
    height: 18,
    resizeMode: 'contain',
    tintColor: '#00CD00',
  },
  tipsTxtRight: {
    fontSize: 15,
    color: '#00CD00',
    marginLeft: 6,
    fontWeight: 'bold',
  },
  tipImgError: {
    width: 18,
    height: 18,
    resizeMode: 'contain',
    tintColor: '#ff3050',
  },
  tipsTxtError: {
    fontSize: 15,
    color: '#ff3050',
    marginLeft: 6,
    fontWeight: 'bold',
  },
})
